<template>
  <div class="open-study-form">
    <nav-bar :title="'开通课程'"></nav-bar>
    <van-form @submit="onSubmit">
      <van-field
        v-model="form.openCode"
        name="开课码"
        label="开课码"
        placeholder="请输入开课码"
        :rules="[{ required: true, message: '请填写真实开课码' }]"
      />
      <uploadImage v-model="form.picture"></uploadImage>
      <van-field
        v-model="form.name"
        name="姓名"
        label="姓名"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请填写真实姓名' }]"
      />
      <van-field
        v-model="form.speciality"
        name="专业类别"
        label="专业类别"
        placeholder="请输入专业类别"
        :rules="[{ required: true, message: '请填写专业类别' }]"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="form.sex"
        label="性别"
        placeholder="男/女"
        @click="handShowPop"
      />
      <van-popup v-model="showPic" position="bottom">
        <van-picker show-toolbar :columns="qygr" @confirm="onConf" @cancel="showPic = false" />
      </van-popup>
      <van-field
        v-model="form.idNumber"
        name="身份证"
        label="身份证"
        placeholder="请输入身份证"
        :rules="[{ required: true, message: '请填写真实身份证' }]"
      />
      <van-field
        v-model="form.phone"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请填写真实手机号' }]"
      />
      <van-field
        v-model="form.email"
        name="邮箱"
        label="邮箱"
        placeholder="请输入邮箱"
        :rules="[{ required: true, message: '请填写真实邮箱' }]"
      />
      <van-field
        v-model="form.address"
        name="地址"
        label="地址"
        placeholder="请输入地址"
        :rules="[{ required: true, message: '请填写真实地址' }]"
      />
      <div class="pay-box">
        <div class="title-pay">开票说明</div>
        <div class="pay-cont">请确保所填信息的真实性，如有虚假信息，我们将取消您的课程，结业证书也将失效。</div>
      </div>
      <div style="margin: 16px;">
        <van-button color="#0050A5" round block type="info" native-type="submit">开通课程</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import navBar from '@/components/NavBar'
import uploadImage from '@/components/upload/uploadImageOne'
export default {
  name: 'openStudyForm',
  components: { navBar,uploadImage },
  data() {
    return {
      form: {},
      qygr: ['男', '女'],
      showPic: false,
    }
  },
  methods: {
    handShowPop() {
      this.showPic = true
    },
    async onSubmit() {
      this.form.sex = this.form.sex == '男' ? 1 : 0
      this.form.courseId = this.$route.query.courseId
      // /course/openCourse
      let res = await this.$request({
        url: '/course/openCourse',
        method: 'post',
        data: this.form,
      })
      console.log(res.data, '开通成功')
      if(res.code === 200){
        this.$toast.success('开通成功')
        this.$router.push('openStyduResult')
      }else{
        this.$toast.fail(res.content)
      }
      
    },
    onConf(val) {
      this.form.sex = val
      this.showPic = false
    },
  },
  mounted() {},
}
</script>

<style lang='scss'>
@import '@/assets/css/base';
.open-study-form {
  .pay-box {
    padding: 0 px2rem(30);
    box-sizing: border-box;
    margin-top: px2rem(50);
    .title-pay {
      margin-bottom: 8px;
      color: #333;
      font-weight: bold;
      font-size: px2rem(30);
    }
    .pay-cont {
      font-size: px2rem(26);
      color: #666;
      line-height: 22px;
    }
  }

  .van-cell {
    flex-direction: column;
  }
}
</style>
